import React from 'react';
import { Row, Col, Icon } from 'antd';
import Countup from 'react-countup';
import './index.less';
// 声明我们需要的数据
const chartList = [
    { // 访问者
        type: '访问者', // 标题
        key: 'user',
        icon: 'user',
        num: 104322,
        color: "#40c9c6",
    },
    { // 信息
        type: '信息', // 标题
        key: 'message',
        icon: 'message',
        num: 84313,
        color: "#36A3F7",
    },
    { // 成交金额
        type: '成交金额', // 标题
        key: 'pay',
        icon: 'pay-circle',
        num: 94313,
        color: "#f4516c",
    },
    { // 购物车
        type: '购物车', // 标题
        key: 'shopping',
        icon: 'shopping-cart',
        num: 13289,
        color: "#f6ab40",
    }
]
const panelGroup = (props) => {
    const { changeLine } = props;
    return (
        <div className='panel-group-container'>
            <Row gutter={40} className='panel-group'>
                {chartList.map((item, i) => {
                    return (<Col
                        key={i}
                        lg={6}
                        sm={12}
                        xs={12}
                        onClick={changeLine.bind(this, item.key)}
                        className='card-panel-col'
                    >
                        <div className='card-panel'>
                            <div className='card-panel-icon-wrapper '>
                                <Icon
                                    type={item.icon}
                                    style={{ fontSize: 55, color: item.color }}
                                    className='card-panel-icon'
                                ></Icon>
                            </div>
                            <div className='card-panel-description'>
                                <p className='card-panel-text'>{item.type}</p>
                                <Countup className='card-panel-num' end={item.num} start={0} />
                            </div>
                        </div>
                    </Col>)
                })}
            </Row>
        </div>
    )
}
export default panelGroup;